<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>index</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="demo">
    姓:<input type="text" v-model="firstName">
    <hr>
    名:<input type="text" v-model="lastName">
    <p>全名:{{fullName}}</p>
  </div>
</body>

<script type="text/javascript">
  // 创建vue实例
  const vm = new Vue({
    el: "#demo",
    data: {
      firstName: "",
      lastName: ""
    },
    computed: {
      fullName: {
        get() {
          return this.firstName.toUpperCase() + '-' + this.lastName
        },
        set(nawValue) {
          var names = nawValue.split('-');
          this.firstName = names[0];
          this.lastName = names[names.length - 1];
        }
      }
    }
  })
</script>

</html>